<!--
 * @Author: ChunLai
 * @Date: 2022-02-21 09:38:38
 * @LastEditTime: 2023-12-19 14:30:14
 * @Description: 收入来源(利安:其它需要填入)
 * @FilePath: \0.newInsure\src\views\form\components\IncomeSource.vue
-->
<template>
  <div class="income_source">
    <div class="radios-box">
      <span
        v-for="(item, index) in arrList"
        :key="index"
        :class="{ 'bg-col': checkedList.includes(item.keyId) }"
        @click="handleClick(item)"
      >
        {{ item.text }}
      </span>
    </div>
    <div v-if="checkedList.includes('7')">
      <van-field
        v-model="inputValue"
        placeholder="请输入其它收入来源"
        input-align="right"
        :clearable="true"
        @blur="handleInput"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "IncomeSource",
  props: {
    arrList: {
      type: Array,
      default: () => [],
    },
    value: {
      type: [String, Number, Boolean],
      default: () => "",
    },
    fieldKey: {
      type: String,
      default: () => "",
    },
  },
  model: {
    props: "value",
    event: "changeProp",
  },
  data() {
    return {
      checkedList: [],
      inputValue: "",
    };
  },
  created() {
    if (this.value) {
      let arr2 = this.value.split("/"),
        arr3 = arr2[0].split("#");
      this.checkedList = arr3;
      if (arr2[1]) {
        this.inputValue = arr2[1];
      }
    }
  },
  methods: {
    handleInput() {
      if (this.checkedList === 0) return;
      this.emitFiledValue();
    },
    handleClick(item) {
      if (!this.fieldKey) return;
      if (this.checkedList.includes(item.keyId)) {
        let arr = this.checkedList.filter((ele) => ele != item.keyId);
        this.checkedList = JSON.parse(JSON.stringify(arr));
      } else {
        this.checkedList.push(item.keyId);
      }
      this.emitFiledValue();
    },
    emitFiledValue() {
      let obj = {};
      let fieldValue = this.checkedList.join("#");
      if (fieldValue.indexOf("7") === -1) {
        this.inputValue = "";
      } else {
        if (this.inputValue) {
          fieldValue += `/${this.inputValue}`;
        }
      }
      obj[this.fieldKey] = fieldValue;
      this.$emit("changeProp", fieldValue);
      this.$emit("clickEvent", obj);
    },
  },
};
</script>

<style lang="less" scoped>
.radios-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  span {
    height: 24px;
    padding: 0 10px;
    // border-radius: 25px;
    color: #747474;
    background-color: #f7f7f7;
    border: 1px solid #f7f7f7;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    margin-bottom: 8px;
    margin-left: 10px;

    &.bg-col {
      color: #f54040;
      border: 1px solid #f54040;
      background-color: #fff0f0;
    }
  }
}
.income_source {
  /deep/.van-cell {
    padding: 0;
  }
}
</style>
